<template>
  <div>
    <tabs :tabs="tabs" />
    <div class="question">
      <div class="question-header">
        <div class="title">{{ paperInfo.title }}</div>
        <div class="time">
          <span v-if="paperInfo.total_time == 0">作答时长：不限制</span>
          <span v-else>作答时长：{{ paperInfo.total_time }} 分钟</span>
        </div>
        <div class="desc">
          <span>{{ paperInfo.info }}</span>
          <!--
          <span>{{ `共${paperInfo.total_count}题：` }}</span>
          <span v-if="statisticScore(1, 'number') > 0">{{ `${statisticScore(1, 'number')}道单选题、` }}</span>
          <span v-if="statisticScore(2, 'number') > 0">{{ `${statisticScore(2, 'number')}道判断题、` }}</span>
          <span v-if="statisticScore(3, 'number') > 0">{{ `${statisticScore(3, 'number')}道多选题、` }}</span>
          <span v-if="statisticScore(4, 'number') > 0">{{ `${statisticScore(4, 'number')}道不定项选择题、` }}</span>
          <span v-if="statisticScore(5, 'number') > 0">{{ `${statisticScore(5, 'number')}道填空题、` }}</span>
          <span v-if="statisticScore(6, 'number') > 0">{{ `${statisticScore(6, 'number')}道材料题、` }}</span>
          <span v-if="statisticScore(7, 'number') > 0">{{ `${statisticScore(7, 'number')}道完型填空、` }}</span>
          <span v-if="statisticScore(8, 'number') > 0">{{ `${statisticScore(8, 'number')}道简答题` }}</span>
          -->
        </div>
      </div>

      <div class="question-wrap">
        <div v-for="(part, i) in paperInfo.paper_parts" :key="i" class="topic-type">
          <div class="topic-title">{{ part.title }}</div>
          <div class="topic-list">
            <el-table :data="part.value" style="width: 100%">
              <el-table-column label="题库">
                <template slot-scope="scope">
                  {{ scope.row.bank.title }}
                </template>
              </el-table-column>
              <el-table-column>
                <template v-slot:header>
                  单选题(道)
                </template>
                <template slot-scope="scope">
                  {{ scope.row.topics.question_type_1 }}
                </template>
              </el-table-column>
              <el-table-column>
                <template v-slot:header>
                  判断题(道)
                </template>
                <template slot-scope="scope">
                  {{ scope.row.topics.question_type_2 }}
                </template>
              </el-table-column>
              <el-table-column>
                <template v-slot:header>
                  多选题(道)
                </template>
                <template slot-scope="scope">
                  {{ scope.row.topics.question_type_3 }}
                </template>
              </el-table-column>
              <el-table-column>
                <template v-slot:header>
                  不定项选择题(道)
                </template>
                <template slot-scope="scope">
                  {{ scope.row.topics.question_type_4 }}
                </template>
              </el-table-column>
              <el-table-column>
                <template v-slot:header>
                  填空题(道)
                </template>
                <template slot-scope="scope">
                  {{ scope.row.topics.question_type_5 }}
                </template>
              </el-table-column>
              <el-table-column>
                <template v-slot:header>
                  材料题(道)
                </template>
                <template slot-scope="scope">
                  {{ scope.row.topics.question_type_6 }}
                </template>
              </el-table-column>
              <el-table-column>
                <template v-slot:header>
                  完形填空题(道)
                </template>
                <template slot-scope="scope">
                  {{ scope.row.topics.question_type_7 }}
                </template>
              </el-table-column>
              <el-table-column>
                <template v-slot:header>
                  简答题(道)
                </template>
                <template slot-scope="scope">
                  {{ scope.row.topics.question_type_8 }}
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Tabs from '../tabs'
/** 累加器 **/
const sum = (...arr) => [].concat(...arr).reduce((acc, val) => acc + val, 0)
export default {
  components: {
    Tabs
  },
  data() {
    return {
      paperInfo: {},
      tabs: [
        {
          title: '随机试卷详情',
          uri: '/exam/paper/random/' + this.$route.params.id + '/details',
          meta: {
            permission: 'exam.paper.list'
          }
        }
      ]
    }
  },
  created() {
    // 获取试题详情
    this.getPaperInfo()
  },
  methods: {
    getPaperInfo() {
      const paperId = this.$route.params.id;
      this.$http.get(
        '/exam/admin/paper/' + paperId + '/info',
        {},
        ({ data }) => {
          this.paperInfo = data
        },
        _ => {}
      )
    },
    // 当前部分试题统计
    statisticScore(type, key) {
      /**
       * key score当前部分每种题型的总分数，number当前部分每种题型的总题数
       * type 试题的类型
       */
      const parts = this.paperInfo.paper_parts
      if (!parts) return 0
      const question = {
        1: 'question_type_1',
        2: 'question_type_2',
        3: 'question_type_3',
        4: 'question_type_4',
        5: 'question_type_5',
        6: 'question_type_6',
        7: 'question_type_7',
        8: 'question_type_8'
      }
      const calc = {
        // 每种题型总题数
        number: function() {
          return sum(parts.map((part) => sum(part.value.map((item) => (item.topics[question[type]])))))
        },
        run: function(fn) {
          return fn && fn()
        }
      }
      return calc.run(calc[key])
    }
  }
}
</script>

<style lang="scss" scoped>
.question {
  width: 890px;
  margin: 30px auto 0;
  // 头部标题部分
  &-header {
    text-align: center;
    .title {
      font-size: 22px;
      font-weight: 500;
      color: #303133;
      margin-bottom: 15px;
    }
    .desc {
      margin-top: 20px;
      font-size: 14px;
      font-weight: 400;
      color: #909399;
      line-height: 22px;
      display: flex;
      flex-wrap: wrap;
    }
    .time {
      margin-top: 15px;
      font-size: 14px;
      font-weight: 400;
      color: #303133;
      display: flex;
      justify-content: center;
      span {
        margin: 0 35px;
      }
    }
  }
  // 试题部分
  &-wrap {
    margin-top: 30px;
    border-top: 1px solid #ebeef5;
    padding: 0 24px;
    .topic-type {
      margin-top: 20px;
      .topic-title {
        font-size: 20px;
        font-weight: bold;
        color: #303133;
        span {
          margin-left: 6px;
          font-size: 12px;
          font-weight: 400;
          color: #606266;
        }
      }
      .topic-list {
        margin-top: 5px;
        .topic-item {
          padding: 20px 0;
          border-bottom: 1px solid #ebeef5;
          .top {
            display: flex;
            font-size: 14px;
            font-weight: 500;
            color: #303133;
            line-height: 26px;
          }
          .options {
            margin-top: 4px;
            .el-radio,
            .el-checkbox,
            .el-textarea {
              margin-top: 12px;
              display: flex;
              margin-right: 0;
            }
            .filling-item {
              margin-top: 12px;
              display: flex;
              align-items: center;
              border-bottom: 1px solid #303133;
              .tag {
                font-size: 12px;
                font-weight: 400;
                color: #303133;
              }
              ::v-deep.el-input__inner {
                border: none;
              }
            }
          }
          .bottom {
            margin-top: 24px;
            display: flex;
            align-items: center;
            font-size: 14px;
            font-weight: 400;
            color: #606266;
            .pars-btn {
              margin-left: 100px;
              cursor: pointer;
            }
          }
          .pars-wrap {
            margin-top: 24px;
            .correct {
              font-size: 14px;
              font-weight: 500;
              color: #606266;
              span {
                color: #67c23a;
                margin-right: 40px;
              }
            }
            .desc {
              margin-top: 7px;
              font-size: 14px;
              font-weight: 400;
              color: #606266;
              line-height: 24px;
            }
          }
        }
      }
    }
  }
}
</style>
